<template>
	<view class="container999" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
		<!-- 刷新组件需搭配scroll-view使用，并在pages.json中添加 "disableScroll":true-->
		<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
		<view class='nav'>
			<!-- 导航栏 agents导航栏标题 -->
			<navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
		</view>
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper style="min-height: 100vh;" :current="currentTab" @change="swiperTab">
			<swiper-item v-for="(listItem,listIndex) in list" :key="listIndex">
				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1" scroll-with-animation :scroll-into-view="toView">
					<view :id="'top'+listIndex" style="width: 100%;height: 200upx;"></view>
					<view class='content'>
						<view  v-for="(item,index) in listItem" v-if="listItem.length > 0" :key="index">
								<view v-if="index==0" class="year">
									<text class="number">{{listItem[index].year}}</text> 年
								</view>
								<view v-if="listItem[index-1]"  class="year">
									<text class="number">{{listItem[index].year==listItem[index-1].year?'':listItem[index].year}}</text> <text class="">{{listItem[index].year==listItem[index-1].year?'':' 年'}}</text>
								</view>
								<view class='card'>
								
									<view class="date">{{item.create_time}}</view>
									<view class="title">{{item.title}}</view>
									<view class="money">{{item.money}}</view>
								</view>
						</view>
						
					</view>
					<view class='noCard' v-if="listItem.length===0">
						暂无信息
					</view>
					<view style="width: 100%;height: 100upx;opacity:0;">没有更多了</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	var app = getApp();
	var host = app.globalData.host,
		urls = app.globalData.urls;
const util = require('../../util/util.js');
import refresh from '../../components/switch-tab/refresh.vue';
import navTab from '../../components/switch-tab/navTab.vue';
import tabBar4 from '../../components/switch-tab/tabBar4.vue';
export default {
	components: {refresh,navTab,tabBar4},

	onLoad(e) {
		console.log('sss',e)
		let that = this,userInfo = uni.getStorageSync('setUserData')
		that.userInfo = userInfo
		if(!userInfo){
			uni.reLaunch({
				url:"../login/login"
			})
		}
		that.currentTab=e.status
		
		uni.request({
				url:host+urls.gjjlists,
				method:'GET',
				header:{
					'XX-TOKEN':userInfo.accesstoken
				},
				data:{
					partner_id:userInfo.id,
					page:that.pages[e.status],
					status:e.status
				},success(res) {
					console.log('0000---',res)
					if(res.data.code==0){
						uni.showToast({
							title:'请求失败',
							icon:'none'
						})
					}else{
						if(that.list[e.status].length==0){
							that.list[e.status] = res.data.data
							that.$forceUpdate()
						}
					}
				}
			})
		
	},
	onShow() {
		
	},
	onHide() {},
	onReachBottom(){
		console.log('onReachBottom--')
	},
	data() {
		return {
			currentPage:'index',
			toView:'',//回到顶部id
			tabTitle:['全部','缴存','提取','其他'], //导航栏格式 --导航栏组件
			currentTab: 0, //sweiper所在页
			pages:[1,1,1,1], //第几个swiper的第几页
			list: [[],[],[],[]] //数据格式
			
		};
	},
	methods: {
		toTop(){
			this.toView = ''
			setTimeout(()=>{
				this.toView = 'top' + this.currentTab
			},10)
		},
		changeTab(index){
			this.currentTab = index;
			let that = this,list = that.list,userInfo = uni.getStorageSync('setUserData')
			console.log(that.list)
			uni.request({
				url:host+urls.gjjlists,
				method:'GET',
				header:{
					'XX-TOKEN':userInfo.accesstoken
				},
				data:{
					partner_id:userInfo.id,
					page:that.pages[index],
					status:index
				},success(res) {
					console.log('0000---',res)
					if(res.data.code==0){
						uni.showToast({
							title:'请求失败',
							icon:'none'
						})
					}else{
						if(that.list[index].length==0){
							that.list[index] = res.data.data
							that.$forceUpdate()
						}
					}
				}
			})
		},
		// 其他请求事件 当然刷新和其他请求可以写一起 多一层判断。
		isRequest() {
			return new Promise((resolve, reject) => {
				this.pages[this.currentTab]++
				var that = this
				setTimeout(() => {
					uni.hideLoading()
					// uni.showToast({
					// 	icon: 'none',
					// 	title: `请求第${that.currentTab + 1 }个导航栏的第${that.pages[that.currentTab]}页数据成功`
					// })
					uni.request({
							url:host+urls.gjjlists,
							method:'GET',
							header:{
								'XX-TOKEN':that.userInfo.accesstoken
							},
							data:{
								partner_id:that.userInfo.id,
								page:that.pages[that.currentTab],
								status:that.currentTab
							},success(res) {
								console.log('0111---',res)
								if(res.data.code==0){
									uni.showToast({
										title:'请求失败',
										icon:'none'
									})
								}else{
									
										let newData = res.data.data
										resolve(newData)
										// that.list[that.currentTab] = res.data.data
										// that.$forceUpdate()
									
								}
							}
						})
					
				}, 1000)
			})
		},
		// swiper 滑动
		swiperTab: function(e) {
			console.log('swiper')
			var index = e.detail.current //获取索引
			this.$refs.navTab.longClick(index);
		},
		// 加载更多 util.throttle为防抖函数
		lower1: util.throttle(function(e) {
			console.log('+++',`加载${this.currentTab}`)//currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
			uni.showLoading({
				title: '加载中',
				mask:true
			})
			this.isRequest().then(
			(res)=>{
				console.log('=====',res)
				let tempList = this.list
				tempList[this.currentTab] = tempList[this.currentTab].concat(res)
				console.log('tempList',tempList)
				this.list = tempList
				this.$forceUpdate() //二维数组，开启强制渲染
			})
		}, 300),
		// 刷新touch监听
		refreshStart(e) {
			this.$refs.refresh.refreshStart(e);
		},
		refreshMove(e){
			this.$refs.refresh.refreshMove(e);
		},
		refreshEnd(e) {
			this.$refs.refresh.refreshEnd(e);
		},
		isRefresh(){
				setTimeout(() => {
					uni.showToast({
						icon: 'success',
						title: '刷新成功'
					})
					this.$refs.refresh.endAfter() //刷新结束调用
				}, 1000)
		}
	}
};
</script>

<style lang="scss">
		.container999 {
	  width: 100vw;
	  font-size: 28upx;
	  min-height: 100vh;
	  overflow: hidden;
	  color: #6B8082;
	  position: relative;
	  background-color: #f6f6f6;
	}
	.content {
		width: 100%;
	}
	.year{
		
		padding: 15upx 25upx;
	}
	.year .number{
		font-size: 40upx;
	}
	.card {
		width: 95%;
		height: 60rpx;
		background-color: white;
		margin: 0 auto 15upx auto;
		background: #FFFFFF;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.10);
		border-radius: 5px;
		position: relative;
		font-size: 30rpx;
		line-height: 60rpx;
	}
	.card .date,.title,.money{
		width: 33%;
		float: left;
		text-align: center;
	}
	.noCard {
		width: 90%;
		height: 200upx;
		margin: auto;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		box-shadow: 0 0 10upx 0 rgba(0, 0, 0, 0.10);
		border-radius: 10upx;
	}
	
	
	.nav {
		// height: 180rpx;
		padding-top: 60rpx;
		position: fixed;
		left: 0;
		top: 0;
		color: white;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 24upx;
		background-color: #2196f3;
		z-index: 996;
	}
	
	.searchInput999 {
		width: 90%;
		margin: 0 auto;
		background: white;
		border-radius: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 56upx;
	}
	
	.search999 {
		width: 32upx;
		height: 32upx;
	}
	
	.searchBox999 {
		width: 56upx;
		height: 56upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.input999 {
		color: #999;
		width: 80%;
	}
</style>
